<template>
  <div class="flex-1 page_contain">
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="40px">
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.year"
              placeholder="请选择"
              filterable
              :suffixIcon="() => '年'"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.month"
              placeholder="请选择"
              filterable
              clearable
              :suffixIcon="() => '月'"
            >
              <el-option
                v-for="item in useDictionary('MonthList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="handleReset">
              <i-ep-refresh />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <div style="height: calc(100vh - 120px - 80px); overflow-y: auto">
        <div class="flex h-[280px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">故障维修-年度统计</div>
            <deviceManage-line
              :id="`yearTotal1`"
              key="3"
              xUnit="月"
              :params="[reportData?.annualStatistics ?? {}]"
            />
          </div>
        </div>
        <div class="flex h-[300px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">故障维修工段/班组统计</div>
            <deviceManage-bar
              :id="`allClose`"
              key="3"
              title=""
              :params="reportData?.aectionStatistics ?? {}"
            />
          </div>
          <div class="flex-1 h-full card_class ml-[10px]!">
            <div class="card_title">
              {{ `故障模式统计分析` }}
            </div>
            <deviceManage-pie
              :id="`allMonthCount`"
              key="3"
              :params="reportData?.teamStatistics?.data ?? []"
            />
          </div>
        </div>

        <div class="flex h-[330px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title flex justify-between items-center">
              <span>故障维修-故障位置统计</span>
              <el-select
                v-model="processId"
                placeholder="请选择工序"
                clearable
                size="small"
                style="width: 130px"
              >
                <el-option
                  v-for="(item, index) in currentProcess"
                  :key="index"
                  :label="item"
                  :value="item"
                  @click="handleProcess"
                />
              </el-select>
            </div>
            <!-- :title="processId" -->
            <deviceManage-bar-one
              :id="`yearTotal3`"
              key="6"
              :title="` `"
              :params="locationStatistics ?? []"
            />
          </div>
        </div>

        <div class="flex h-[300px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">非停机故障</div>
            <deviceManage-bar
              :id="`allClose1`"
              key="4"
              title=""
              :params="reportData?.nonStopFault ?? {}"
            />
          </div>
          <div class="flex-1 h-full card_class ml-[10px]!">
            <div class="card_title">
              {{ `停机故障` }}
            </div>
            <deviceManage-bar
              :id="`allClose2`"
              key="5"
              title=""
              color="rgb(243,148,35)"
              :params="reportData?.stopFault ?? {}"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import dayjs from "dayjs";
import { mockData, mockProcessList } from "./index";

defineOptions({
  name: "EAMEQUDEVICEMANAGEREPORTREPAIR",
  inheritAttrs: false,
});

// 获取年度列表
const yearOptions = ref();
async function getYears() {
  const { data } = await request({
    url: "/system/dateInfo/getYearList",
    method: "post",
    data: {},
  });
  yearOptions.value = data;
}

function handleReset() {
  searchParam.year = dayjs().year().toString();
  (searchParam.month = (dayjs().month() + 1).toString()), handleSearch();
}

const processId = ref();
const reportData = ref();
const loading = ref(false);

async function handleSearch() {
  currentProcess.value = [];
  locationStatistics.value = [];
  processId.value = null;
  reportData.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  const { data } = await request({
    url: `/eam/equStatistics/queryEamRepairOrderList`,
    method: "post",
    data: {
      // workshopSectionCode: tabList.value[Number(activeTabs.value)].label,
      statisticsYear: searchParam.year,
      statisticsMoon: searchParam.month,
    },
  }).finally(() => {
    loading.value = false;
  });
  reportData.value = data;

  let list: any = [];
  data.locationStatistics?.map((e) => {
    list.push(e.name);
  });
  currentProcess.value = list;

  if (data.locationStatistics.length) {
    locationStatistics.value = [data.locationStatistics[0]];
    processId.value = data.locationStatistics[0].name;
  }

  // console.log("reportData", data);
  // console.log("mockData", mockData);
  // reportData.value = mockData;
}
const currentProcess: any = ref([]);
const locationStatistics: any = ref([]);

function handleProcess() {
  // reportData.value = {
  //   ...reportData.value,
  //   yearOrderTrend1: null,
  // };
  // setTimeout(async () => {
  //   reportData.value.yearOrderTrend1 = mockData.yearOrderTrend1;
  // }, 20);
  const current =
    reportData.value.locationStatistics?.filter(
      (e) => e.name === processId.value
    )[0] ?? {};
  locationStatistics.value = [current];
}

// tab点击事件
function tabClickHandle(e: any) {
  reportData.value = null;
  handleSearch();
}

// 请求参数
// const requestApi = "/dmpDosPcm/psmprocessdata/queryByPage";

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

onMounted(() => {
  getYears();
  handleSearch();
});
</script>

<style lang="scss" scoped>
:deep(.app-container .el-tabs--border-card) {
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  border: none;
  .el-tabs__content {
    height: calc(100vh - 120px - 80px - 34px);
    overflow-y: auto;
  }
  .el-loading-spinner {
    margin-top: 200px;
  }
}
:deep(.search-container) {
  .el-form-item {
    margin-right: 14px;
  }
  .el-select .el-input .el-select__caret.el-icon {
    font-style: normal;
    transform: none !important;
  }
}

.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
  }
}
</style>
